<html>
<head>
    <meta charset="utf-8">
    <title>广告交易</title>
    <link rel="stylesheet" type="text/css" href="../../assest/plugins/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="../../assest/css/win.css"/>
    <link rel="stylesheet" type="text/css" href="../../assest/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="./accounts.css">
</head>
<body>
<div id="adAccounts" class="page-container">
    <div class="accounts-wrap">
        <div class="accounts-header">
            <em>设置我的公众号</em>

            <div class="btn-wrap">
                <span class="btn btn-link" @click="show_e_Wwb"> 我要投广告</span>
                <span class="btn btn-link" @click="showPageHelp"> 什么是广告交易？</span>
                <span class="btn btn-link" @click="showQQ">客服QQ：800033932</span>
                <span class="btn btn-primary" @click="addAccountStep1"> <i class="fa fa-user-plus"></i> 添加公众号</span>
            </div>
        </div>
        <div id="tableHeaderFixed" class="table-placehold-wrap">
            <table class="table-account table-account-1 table-placehold">
                <thead>
                <tr>
                    <th width="35"></th>
                    <th width="180">公众号</th>
                    <th width="100">粉丝量</th>
                    <th width="130">
                        多图1报价
                        <div class="text-primary">(硬广)万粉价 | 总价</div>
                        <div class="text-primary">(软广)万粉价 | 总价</div>
                    </th>
                    <th width="130">多图2报价
                        <div class="text-primary">(硬广)万粉价 | 总价</div>
                        <div class="text-primary">(软广)万粉价 | 总价</div></th>
                    <th width="130">多图其他报价
                        <div class="text-primary">(硬广)万粉价 | 总价</div>
                        <div class="text-primary">(软广)万粉价 | 总价</div></th>
                    <th width="130">单图文报价
                        <div class="text-primary">(硬广)万粉价 | 总价</div>
                        <div class="text-primary">(软广)万粉价 | 总价</div></th>
                    <th width="90">广告意愿</th>
                    <th>想接类型</th>
                    <th>不想接类型</th>
                    <th width="100">操作</th>
                </tr>
                </thead>
            </table>
        </div>

        <table class="table-account table-account-1">
            <thead>
            <tr>
                <th width="35"></th>
                <th width="180">公众号</th>
                <th width="100">粉丝量</th>
                <th width="130">
                    多图1报价
                    <div class="text-primary">(硬广)万粉价 | 总价</div>
                    <div class="text-primary">(软广)万粉价 | 总价</div>
                </th>
                <th width="130">多图2报价
                    <div class="text-primary">(硬广)万粉价 | 总价</div>
                    <div class="text-primary">(软广)万粉价 | 总价</div></th>
                <th width="130">多图其他报价
                    <div class="text-primary">(硬广)万粉价 | 总价</div>
                    <div class="text-primary">(软广)万粉价 | 总价</div></th>
                <th width="130">单图文报价
                    <div class="text-primary">(硬广)万粉价 | 总价</div>
                    <div class="text-primary">(软广)万粉价 | 总价</div></th>
                <th width="90">广告意愿</th>
                <th>想接类型</th>
                <th>不想接类型</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="account in adAccounts">
                <td @click="account.checked=!account.checked"><span class="checkbox" :class="account.checked?'checked':''"></span></td>
                <td class="col-avatar">
                    <div class="avatar-wrap">
                        <img :src="account.avatar" alt="">
                    </div>
                    <div class="text-primary">{{account.nick_name}}</div>
                    <span class="text-muted">{{account.user_name}}</span>
                </td>
                <td>{{account.fans_num | numberFriendly}}</td>
                <td class="price-wrap">
                    <div class="text-primary">{{ account.price1_yg | priceFriendly }} | {{ account.price1_yg | totalFansPrice account.fans_num | priceFriendly}}</div>
                    <div class="text-primary">{{ account.price1_lg | priceFriendly }} | {{ account.price1_lg | totalFansPrice account.fans_num | priceFriendly}}</div>
                    <span class="price-set" @click="setAccountPrice(account,'price1')" title="设置价格"></span>
                </td>
                <td class="price-wrap">
                    <div class="text-primary">{{ account.price2_yg | priceFriendly }} | {{ account.price2_yg | totalFansPrice account.fans_num | priceFriendly}}</div>
                    <div class="text-primary">{{ account.price2_lg | priceFriendly }} | {{ account.price2_lg | totalFansPrice account.fans_num | priceFriendly}}</div>
                    <span class="price-set" @click="setAccountPrice(account,'price2')" title="设置价格"></span>
                </td>
                <td class="price-wrap">
                    <div class="text-primary">{{ account.price3_yg | priceFriendly }} | {{ account.price3_yg | totalFansPrice account.fans_num | priceFriendly}}</div>

                    <div class="text-primary">{{ account.price3_lg | priceFriendly }} | {{ account.price3_lg | totalFansPrice account.fans_num | priceFriendly}}</div>
                    <span class="price-set" @click="setAccountPrice(account,'price3')" title="设置价格"></span>
                </td>
                <td class="price-wrap">
                    <div class="text-primary">{{ account.price0_yg | priceFriendly }} | {{ account.price0_yg | totalFansPrice account.fans_num | priceFriendly}}</div>

                    <div class="text-primary">{{ account.price0_lg | priceFriendly }} | {{ account.price0_lg | totalFansPrice account.fans_num | priceFriendly}}</div>
                    <span class="price-set" @click="setAccountPrice(account,'price0')" title="设置价格"></span>
                </td>
                <td>{{account.is_onsale=='1'?'接':'不接'}}</td>
                <td>{{account.accept_tags | adTypeToText adTypeMap}}</td>
                <td>{{account.reject_tags | adTypeToText adTypeMap}}</td>
                <td>
                    <span class="btn btn-link" @click="setMpAdAccount(account)">设置</span>
                    <span class="btn btn-link" @click="updateMpAdAccount(account)"><i v-if="account.updating" class="fa fa-loading fa-spinner"></i> 更新数据</span>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="data-empty-tips" v-if="!adAccountsPager.loading && adAccounts.length==0">
            <p>您还未添加过接单的公众号</p>
        </div>
        <div class="loading-warp" v-if="adAccountsPager.loading">
            <div class="loading-content">
                <div class="spinner">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
                <p>加载数据中</p>
            </div>
        </div>
    </div>
    <div class="account-footer">
        <div class="footer-left">
            <span @click="checkAll" class="checkbox checkbox-word" :class="isAllChecked?'checked':''">全选</span>
            <ul class="pagination" v-if="adAccountsPager.totalNum>adAccountsPager.perPage">
                <li>
                    <a href="#" @click="adAccountsPrev" title="前一页">
                        <span aria-hidden="true">前一页</span>
                    </a>
                </li>
                <li>
                    <a href="#" @click="adAccountsNext" title="后一页">
                        <span aria-hidden="true">后一页</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="btn-wrap">
            <span class="btn btn-primary" @click="setMultiAccounts">批量设置</span>
        </div>
    </div>

    <!-- 添加公众号 步骤一 开始 -->
    <div class="select-modal" v-cloak v-if="status.showAddAccountStep1">

        <div class="modal-scrollable" style="z-index: 10051;">
            <div class="modal in" tabindex="-1" style="display:block; width: 800px; margin-left: -400px;margin-top: -270px;" aria-hidden="false">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="status.showAddAccountStep1=false;">×</button>
                    <h4 class="modal-title">请选择要接广告的公众号
                        <span v-if="checkedEditAccounts.length>0" class="text-muted checked-tips">（已选{{checkedEditAccounts.length}}个）</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <table class="table-account table-account-2">
                        <thead>
                        <tr>
                            <th width="35"></th>
                            <th width="170">微信名</th>
                            <th width="170">微信号</th>
                            <th width="80">粉丝量</th>
                            <th class="text-center">说明</th>
                            <th class="text-center" width="100">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="account in accountsForEditVisable | limitBy accountsForEditPager.perPage accountsForEditPager.start">
                            <td @click="checkOneAddAccount(account)">
                                <span class="checkbox" v-if="account.addType==0" :class="account.checked?'checked':''"></span>
                            </td>
                            <td @click="checkOneAddAccount(account)">
                                <img class="account-avatar" :src="account.avatar">
                                <span class="text-primary">{{account.nick_name}}</span>
                            </td>
                            <td><span class="text-muted">{{account.user_name}}</span></td>
                            <td><span class="text-muted">{{account.fans_num | numberFriendly}}</span></td>
                            <td class="text-center">{{account.addType | accountAddedTips}}</td>
                            <td class="text-center" >
                                <span v-if="account.fetching==false" class="btn btn-link" @click="updateLocalMpAccountInfo(account)">更新数据</span>
                                <span v-if="account.fetching==true" class="btn btn-link"><i class="fa fa-spinner fa-loading"></i> 更新中</span>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="data-empty-tips" v-if="accountsForEditVisable.length==0">
                        <p>您没有可添加的公众号</p>
                    </div>
                </div>

                <div class="modal-footer">
                    <div class="footer-left">
                        <span @click="checkAllAddAccouts" class="checkbox checkbox-word" :class="isAddAccoutsAllChecked?'checked':''">全选</span>
                        <ul class="pagination" v-if="accountsForEditVisable.length>accountsForEditPager.perPage">
                            <li>
                                <a href="#" @click="accountsForEditPrev" title="前一页">
                                    <span aria-hidden="true">前一页</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" @click="accountsForEditNext" title="后一页">
                                    <span aria-hidden="true">后一页</span>
                                </a>
                            </li>
                        </ul>
                        <span v-if="status.accountsForEditShowAll==false" @click="status.accountsForEditShowAll=true;" class="btn btn-link">显示所有本地公众号({{accountsForEdit.length}})</span>
                        <span v-if="status.accountsForEditShowAll==true" @click="status.accountsForEditShowAll=false;" class="btn btn-link">仅显示可添加的公众号</span>
                    </div>
                    <a class="btn btn-primary" @click="addAccountStep2"> 确定 </a>
                    <a class="btn btn-default" @click="status.showAddAccountStep1=false;"> 取消 </a>
                </div>

            </div>
        </div>
        <div class="modal-backdrop in" style="z-index: 10050;"></div>
    </div>
    <!--  添加公众号 步骤一 结束  -->

    <!-- 添加公众号 步骤二 或 修改公众号 开始 -->
    <div class="select-modal" v-cloak v-if="status.showAddAccountStep2 || status.showSetMpAdAccount">

        <div class="modal-scrollable" :class="checkedEditAccounts.length>1?'multi-account':''" style="z-index: 10051;">
            <div class="modal in" tabindex="-1" style="display:block; width: 800px; margin-left: -400px;margin-top: -270px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="detailSetClose">×</button>
                    <h4 class="modal-title">
                        已选 <span class="badge">{{checkedEditAccounts.length}}</span>个公众号，请填写下方内容
                        <div class="popover bottom" style="top: 32px; left: -45px; width: 200px;">
                            <div class="arrow"></div>
                            <h3 class="popover-title">已选公众号</h3>

                            <div class="popover-content">
                                <ul class="tips-accounts">
                                    <li v-for="account in checkedEditAccounts">
                                        {{account.nick_name}} <span class="text-muted">{{account.user_name}}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </h4>
                </div>
                <div class="modal-body content-wrap" style="max-height: 440px;overflow-y: auto;">
                    <div class="form-group" v-if="checkedEditAccounts.length==1">
                        <label>1、广告意愿（必填）</label>

                        <div class="form-content">
                            <label class="radio-inline">
                                <input type="radio" value="1" v-model="setAccountDetailData.is_onsale"> 接广告
                            </label>
                            <label class="radio-inline">
                                <input type="radio" value="0" v-model="setAccountDetailData.is_onsale"> 不接广告
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{checkedEditAccounts.length==1?'2':'1'}}、设置价格（必填） <span class="text-muted">（若想某位置不接单，请设置万粉单价为0）</span></label>

                        <div class="form-content">
                            <table class="set-price-table">
                                <tr>
                                    <th colspan="2">设置硬广价</th>
                                    <th colspan="2" class="border-left">设置软广价</th>
                                </tr>
                                <tr>
                                    <td width="130">
                                        多图①万粉单价：
                                    </td>
                                    <td width="200">
                                        <input class="form-control" type="text" :readonly="setAccountDetailData.is_onsale=='0'" @change="autoSetElsePrice" v-model="setAccountDetailData.price1_yg">元
                                        <div class="result-tips">多图①硬广总报价：{{setAccountDetailData.price1_yg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                    <td class="border-left" width="140">
                                        多图①万粉单价：
                                    </td>
                                    <td width="220">
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price1_lg">元
                                        <div class="result-tips">多图①软广总报价：{{setAccountDetailData.price1_lg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        多图②万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price2_yg">元
                                        <div class="result-tips">多图②硬广总报价：{{setAccountDetailData.price2_yg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                    <td class="border-left" width="130">
                                        多图②万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price2_lg">元
                                        <div class="result-tips">多图②软广总报价：{{setAccountDetailData.price2_lg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        多图③万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price3_yg">元
                                        <div class="result-tips">多图③硬广总报价：{{setAccountDetailData.price3_yg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                    <td class="border-left" width="130">
                                        多图③万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price3_lg">元
                                        <div class="result-tips">多图③软广总报价：{{setAccountDetailData.price3_lg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        单图万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price0_yg">元
                                        <div class="result-tips">单图文硬广总报价：{{setAccountDetailData.price0_yg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                    <td class="border-left" width="130">
                                        单图万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price0_lg">元
                                        <div class="result-tips">单图文软广总报价：{{setAccountDetailData.price0_lg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <div class="form-group">
                        <label>{{checkedEditAccounts.length==1?'3':'2'}}、广告偏好（选填）</label>
                        <div class="form-content part-wrap">
                            <div class="part-left">
                                <label>想接的类型</label>
                                <ul>
                                    <li v-for="adType in adTypeMap">
                                        <label>
                                            <input type="checkbox" @change="accept_tagsChange" value="{{adType.id}}" v-model="setAccountDetailData.accept_tags"> {{adType.tag_name}}
                                        </label>
                                    </li>
                                </ul>
                            </div>
                            <div class="part-right">
                                <label>不想接的类型</label>
                                <ul>
                                    <li v-for="adType in adTypeMap">
                                        <label>
                                            <input type="checkbox" @change="reject_tagsChange" value="{{adType.id}}" v-model="setAccountDetailData.reject_tags"> {{adType.tag_name}}
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary" v-if="setAccountDetailData.saving==false" @click="detailSetSure"> 确定 </a>
                    <a class="btn btn-primary" disabled="disabled" v-if="setAccountDetailData.saving==true" > <i class="fa fa-loading fa-spinner"></i> 保存中 </a>
                    <a class="btn btn-default" @click="detailSetCancel"> 返回 </a>
                </div>

            </div>
        </div>
        <div class="modal-backdrop in" style="z-index: 10050;"></div>
    </div>
    <!--  添加公众号 步骤二 结束  -->


    <!-- 编辑公众号单个位置的价格 开始 -->
    <div class="select-modal" v-cloak v-if="status.showSetMpAdAccountPrice">

        <div class="modal-scrollable" style="z-index: 10051;">
            <div class="modal in" tabindex="-1" style="display:block; width: 500px; margin-left: -250px;margin-top: -110px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="detailSetClose">×</button>
                    <h4 class="modal-title">
                        设置 {{checkedEditAccounts[0].nick_name}}({{checkedEditAccounts[0].user_name}}) {{status.nowPriceType | priceType}}的报价
                    </h4>
                </div>
                <div class="modal-body content-wrap" style="max-height: 440px;overflow-y: auto;">
                    <div class="form-group" v-if="checkedEditAccounts.length==1">
                        <div class="form-content">
                            <label>如果填0，表示此广告位不接单</label>
                            <table class="set-price-table">
                                <tr>
                                    <td width="150">
                                        （硬广）万粉单价：
                                    </td>
                                    <td width="200">
                                        <input class="form-control" type="text" :readonly="setAccountDetailData.is_onsale=='0'" @change="autoSetElsePrice" v-model="setAccountDetailData.price1_yg">元
                                        <div class="result-tips">硬广总报价：{{setAccountDetailData.price1_yg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        （软广）万粉单价：
                                    </td>
                                    <td>
                                        <input class="form-control" :readonly="setAccountDetailData.is_onsale=='0'" v-model="setAccountDetailData.price1_lg">元
                                        <div class="result-tips">软广总报价：{{setAccountDetailData.price1_lg | totalFansPrice setAccountDetailData.fans_num | priceFriendly}}</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary" v-if="setAccountDetailData.saving==false" @click="detailSetSure"> 确定 </a>
                    <a class="btn btn-primary" disabled="disabled" v-if="setAccountDetailData.saving==true" > <i class="fa fa-loading fa-spinner"></i> 保存中 </a>
                    <a class="btn btn-default" @click="detailSetCancel"> 返回 </a>
                </div>

            </div>
        </div>
        <div class="modal-backdrop in" style="z-index: 10050;"></div>
    </div>
    <!--  编辑公众号单个位置的价格 结束  -->


    <!-- 绑定手机号 开始 -->
    <div class="select-modal" v-cloak v-if="status.showBindMobile">

        <div class="modal-scrollable" style="z-index: 10051;">
            <div class="modal in" tabindex="-1" style="display:block; width: 400px; margin-left: -200px;margin-top: -200px;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" @click="bindMobileClose">×</button>
                    <h4 class="modal-title">
                        绑定手机号
                    </h4>
                </div>
                <div class="modal-body content-wrap">
                    <p style="padding: 0 10px;">{{wxbUserInfo.nickname}}，您还未绑定手机号。绑定后如果有合适的广告主给您派单，可发通知短信到您手机上，随时掌握订单变动。</p>
                    <table class="bind-mobile-table">
                        <tr>
                            <td class="text-right" width="80">手机号：</td>
                            <td width="150"><input type="text" class="form-control" placeholder="手机号" v-model="bindMobileData.mobile"></td>
                            <td>
                                <span class="btn btn-link" @click="bindMobileSend('text')"><i v-if="bindMobileData.code_sending" class="fa fa-spinner fa-loading"></i> 获取验证码</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-right" width="80">验证码：</td>
                            <td><input type="text" class="form-control" placeholder="验证码" v-model="bindMobileData.code"></td>
                            <td><span v-if="canSendVoice" title="如果您无法收到短信验证码，可以尝试语音验证码，我们会拨打您的手机号码" class="btn btn-link" @click="bindMobileSend('voice')"><i v-if="bindMobileData.code_sending" class="fa fa-spinner fa-loading"></i> 获取语音验证码</span></td>
                        </tr>
                    </table>
                </div>

                <div class="modal-footer">
                    <a class="btn btn-primary" v-if="bindMobileData.saving==false" @click="bindMobileSure"> 绑定 </a>
                    <a class="btn btn-primary" disabled="disabled" v-if="bindMobileData.saving==true" > <i class="fa fa-loading fa-spinner"></i> 绑定中 </a>
                    <a class="btn btn-default" @click="bindMobileClose"> 取消 </a>
                </div>

            </div>
        </div>
        <div class="modal-backdrop in" style="z-index: 10050;"></div>
    </div>
    <!--  绑定手机号 结束  -->

</div>

<script type="text/javascript" src="../../assest/plugins/jquery.min.js"></script>
<script type="text/javascript" src="../../assest/plugins/underscore-min.js"></script>
<script type="text/javascript" src="../../assest/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../assest/plugins/vue-1.0.12.js"></script>
<script type="text/javascript" src="../../assest/plugins/win.js"></script>
<script type="text/javascript" src="./accounts.js"></script>
<!--<script src="http://localhost:35729/livereload.js"></script>-->

<script>
    $(function () {
        window.top.loading.hide();
        PageUtil.getAllMpAccountsAvatar().then(function (successNum) {

        }).catch(function (err) {

        });
        vm.init();
        var tableHeaderFixed = $('#tableHeaderFixed');
        $(window).scroll(function () {
            var top = $(window).scrollTop();
            if (top > 80) {
                tableHeaderFixed.show();
            } else {
                tableHeaderFixed.hide();
            }
        });
    });

</script>

</body>
</html>
